<template>
    <section>
        <el-col :span="24">
            <el-tabs type="border-card" v-model="tab">
                <el-tab-pane v-for="(label, key) in categoryTypes" :key="key" :label="label" :name="key"></el-tab-pane>
                <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini"  row-key="id" default-expand-all
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column>
                        <template slot="header" slot-scope="scope">
                            物料分类名称 <el-button type="text" class="el-icon-circle-plus" @click="addBtn({})" :disabled="!nodeActions.includes('add')"></el-button>
                        </template>
                        <template slot-scope="{row}">{{row.name}}</template>
                    </el-table-column>
                    <el-table-column prop="materiel_attribute_id" label="物料分类属性">
                        <template slot-scope="{row}">
                            <el-popover  placement="right-start" title="属性内容" width="200" trigger="hover">
                                <div v-for="(item, index) in attributeMap[row.materiel_attribute_id].detail" style="font-size: 12px;line-height: 25px;">
                                    <i class="el-icon-s-flag"></i>&nbsp;{{item.name}}
                                </div>
                                <el-tag slot="reference" size="mini">{{attributeMap[row.materiel_attribute_id]['name']}}</el-tag>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="right" fixed="right" width="200">
                        <template slot-scope="{row}">
                            <el-button v-if="row.pid==0" type="text" size="small" class="el-icon-circle-plus" @click="addBtn(row)" :disabled="!nodeActions.includes('add')">&nbsp;添加下级</el-button>
                            <el-button type="text" size="small" class="el-icon-edit" @click="editBtn(row)" :disabled="!nodeActions.includes('edit')">&nbsp;编辑</el-button>
                            <el-button type="text" size="small" class="el-icon-delete" @click="delBtn(row)" :disabled="!nodeActions.includes('del')">&nbsp;删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tabs>
        </el-col>

        <!--新增/编辑-->
        <Modal v-model="addVisible" :title="addTitle" width="500px" :loading="true" :mask-closable="false">
            <el-form label-width="110px" @submit.native.prevent label-position="left">
                <el-form-item label="上级物料名称">
                    <el-input :value="addForm.p_name" size="small" disabled></el-input>
                </el-form-item>
                <el-form-item label="物料分类名称">
                    <el-input v-model.trim="addForm.name" size="small" placeholder="请输入物料分类名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="物料分类属性">
                    <el-select size="small" v-model="addForm.materiel_attribute_id" style="width: 100%">
                        <el-option v-for="(item, index) in attributeList" :key="index" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="attributeMap[addForm.materiel_attribute_id] && attributeMap[addForm.materiel_attribute_id].detail">
                    <div v-for="(item, index) in attributeMap[addForm.materiel_attribute_id].detail" style="font-size: 12px;line-height: 25px;">
                        <i class="el-icon-s-flag"></i>&nbsp;{{item.name}}
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <i-button type="primary" :loading="btnLoading" @click="submitBtn">提交</i-button>
            </div>
        </Modal>
    </section>
</template>

<script>

import {attribute, mcategoryDel, mcategoryList, mcategorySave} from "../../../api/bs/info";

export default {
    name: "bs_info_mcategory",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 1000,
            total: 0,
            data: [],
            categoryTypes: {1 : "主料", 2 : "辅料", 3 : "特殊工艺"},
            user: {},
            nodeActions: [],

            tab: "1",
            addVisible: false,
            addTitle: "新增【物料分类】",
            addForm: {pid: 0, materiel_major_category_id: 1, name: "", materiel_attribute_id: 0},

            attributeList: [],
            attributeMap: {},
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    watch:{
        tab(value){
            this.searchBtn();
        }
    },
    methods: {
        //物料属性
        getAttribute(){
            attribute().then((res) =>{
                this.attributeList = res.data;
                res.data.map(item =>{
                    this.attributeMap[item.id] = item;
                });
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                tab: this.tab
            };
            this.loading = true;
            this.btnLoading = true;
            mcategoryList(param).then((res) => {
                this.loading = false;
                this.btnLoading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
                this.btnLoading = false;
            });
        },
        addBtn(row){
            this.addTitle = "新增【物料分类】";
            this.addForm = {
                pid: row.id ? row.id : 0,
                p_name: row.id && row.pid == 0 ? row.name : "根目录",
                materiel_major_category_id: this.tab,
                name: "",
                materiel_attribute_id: row.materiel_attribute_id ? row.materiel_attribute_id : 0
            };
            this.addVisible = true;
        },
        editBtn(row){
            this.addTitle = "编辑【物料分类】";
            this.addForm = Object.assign({}, row);
            this.addVisible = true;
        },
        delBtn(row){
            this.$confirm("确定删除此分类?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                mcategoryDel({id: row.id}).then((res) =>{
                    this.loading = false;
                    if(res.code === 0){
                        this.$message.success(res.msg);
                        this.getData();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {

            });
        },
        submitBtn(){
            if(!this.addForm.name){
                this.$message.warning("名称不能为空");return;
            }
            this.btnLoading = true;
            mcategorySave(this.addForm).then((res) =>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.$message.success("保存成功");
                    this.addVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() =>{
                this.btnLoading = false;
            })
        }
    },
    mounted() {
        this.getAttribute();
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
